<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-09 18:04:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-13 15:14:18
-->
<template>
  <div
    class="leftMenu"
    style="z-index: 99"
  >
    <div class="cLeft">
      <div class="leftBox">
        <div
          v-for="(k, i) in leftMenus.menus"
          :key="i"
        >
          <div class="menuTitle">{{ k.shortName }}</div>
          <div class="menusBox">
            <div
              class="menuItem"
              @click="methods.checkMenu(i, kk)"
              v-for="(kk, ii) in k.childrens"
              :key="ii"
              :class="{leftMenuColor: kk.isChecked}"
            >
              {{ kk.shortName }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const leftMenus = reactive({
      menus: [
        {
          shortName: '首页',
          childrens: [
            {
              isChecked: false,
              shortName: '工作台'
            },
            {
              isChecked: false,
              shortName: '我的订单'
            },
            {
              isChecked: false,
              shortName: '我的审批'
            }
          ]
        },
        {
          shortName: '产品中心',
          childrens: [
            {
              isChecked: false,
              shortName: '产品管理'
            },
            {
              isChecked: false,
              shortName: '采购管理'
            }
          ]
        },
        {
          shortName: '业务中心',
          childrens: [
            {
              isChecked: false,
              shortName: '产品列表'
            },
            {
              isChecked: false,
              shortName: '订单管理'
            },
            {
              isChecked: false,
              shortName: '客户管理'
            }
          ]
        }
      ]
    })
    const methods = reactive({
      checkMenu(index: number, item: any) {
        leftMenus.menus.forEach(item => {
          item.childrens.forEach(value => {
            value.isChecked = false
          })
        })
        item.isChecked = true
      }
    })
    return {
      leftMenus,
      methods
    }
  }
})
</script>

<style lang="scss" scoped>
.cLeft {
  width: 120px;
  min-height: 660px;
  .leftBox {
    margin: 21px 0 0 25px;
    > div {
      margin-bottom: 15px;
    }
    .menuTitle {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 700;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 8px;
    }
    .menusBox {
      .menuItem {
        cursor: pointer;
        margin-bottom: 5px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(77, 77, 77, 1);
        line-height: 18px;
      }
    }
  }
  .leftMenuColor {
    color: #eb6100 !important;
  }
}
</style>
